/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */
import React, { Fragment, Component } from "react";
import {
  StyleSheet,
  View,
  Text,
  ActivityIndicator,
  Image,
  TextInput,
  ScrollView,
  FlatList,
  SectionList
} from "react-native";

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions
} from "react-native/Libraries/NewAppScreen";
import HttpUtil from "./app/Util/HttpUtil";
var Dimensions = require("Dimensions");
var { height, width } = Dimensions.get("window");
var col = 3;
var boxW = 100;
var vMargin = (width - col * boxW) / (col + 1);
var hMargin = 25;
class App extends Component {
  constructor() {
    super();
    this.state = {
      imgList: [],
      loading: false,
      imgList2: []
    };
  }
  componentDidMount() {
    HttpUtil.get("https://www.mxnzp.com/api/image/girl/list/random").then(
      res => {
        console.log(res);
        this.setState({
          imgList: res.data,
          loading: true,
          currentPage: 0,
          imgList2: res.data
        });
      }
    );
  }
  onAnimation(e) {
    var x = e.nativeEvent.contentOffset.x;
    var currentPage = Math.round(x / width);
    //console.log(currentPage,x,width,x/width)
    this.setState({
      currentPage: currentPage
    });
    this.startTimer();
  }
  startTimer() {
    var srcollView = this.refs.scrollView;
    this.timer = setTimeout(function() {
      console.log(1);
    }, 1000);
  }
  componentWillUnmount() {
    this.timer && clearTimeout(this.timer);
  }
  renderRow(rowData) {
    console.log(rowData);
    return (
      <View style={styles.outViewStyle}>
        <Image source={{uri:rowData.item.imageUrl}} style={{width:100,height:100}}/>
      </View>
      
    )
  }
  render() {
    // {
    //   if (!this.state.loading) {
    //     return (
    //       <View>
    //         <ActivityIndicator />
    //       </View>
    //     );
    //   }
    // }
    // return (
    //   <Fragment>
    //     <View style={styles.container}>
    //       {this.state.imgList.map(res => {
    //         console.log(res);
    //         return (
    //          <View style={styles.outViewStyle}>
    //             <Image source={{ uri: res.imageUrl }} style={{width:100,height:100}}/>
    //          </View>
    //         );
    //       })}
    //     </View>
    //   </Fragment>
    // );
    // return(
    //   <Fragment>
    //     <View style={styles.container1}>
    //       <Image source={require('./app/static/images/touxiang.jpeg')} style={styles.iconStyle}></Image>
    //       <TextInput style={styles.inputStyle} placeholder={'请输入账号'}/>
    //       <TextInput style={styles.inputStyle} placeholder={'请输入密码'} secureTextEntry={true}/>
    //       <View style={styles.loginBtnStyle}>
    //         <Text style={{color:'white'}}>登录</Text>
    //       </View>
    //       <View style={styles.settingStyle}>
    //         <Text>无法登录</Text>
    //         <Text>新用户</Text>
    //       </View>
    //       <View style={styles.loginWayStyle}>
    //         <Text style={{marginRight:20}}>其他登录方式</Text>
    //         <Image source={require('./app/static/images/weibo.png')} style={{width:40,height:40,marginRight:15}}/>
    //         <Image source={require('./app/static/images/weixin.png')} style={{width:40,height:40}}/>
    //       </View>
    //     </View>
    //   </Fragment>
    // )
    return (
      // <View>
      //   <ScrollView
      //     horizontal={true}
      //     showsHorizontalScrollIndicator={false}
      //     pagingEnabled={true}
      //     onMomentumScrollEnd={(e)=>{this.onAnimation(e)}}
      //     ref='scrollView'
      //   >
      //     {this.state.imgList.map((res)=>{
      //       //console.log(res)
      //       return(
      //         <Image source={{uri:res.imageUrl}} style={{width:width,height:300}} key={res.imageUrl}></Image>
      //       )
      //     })}
      //   </ScrollView>
      //   <View style={styles.pageViewStyle}>
      //     {this.state.imgList.map((res,index)=>{
      //       //console.log(index);
      //       var style = (index==this.state.currentPage)?{color:'orange'}:null;
      //       return(
      //         <Text key={res.imageUrl} style={[{fontSize:40,marginLeft:5},style]}>&bull;</Text>
      //       )
      //     })}
      //   </View>
      // </View>
      // <View style={styles.container1}>
      //   <FlatList
      //     data={this.state.imgList2}
      //     renderItem={this.renderRow.bind(this)}
      //   />
      // </View>
      <View>
        <SectionList
          renderItem={({item, index, section}) => <Text key={index}>{item}</Text>}
          renderSectionHeader={({section: {title}}) => (
            <View style={{height:50,backgroundColor:'red',justifyContent:'center'}}>
              <Text style={{fontWeight: 'bold'}}>{title}</Text>
            </View>
            
          )}
          sections={[
            {title: 'Title1', data: ['item1', 'item2']},
            {title: 'Title2', data: ['item3', 'item4']},
            {title: 'Title3', data: ['item5', 'item6']},
            {title: 'Title2', data: ['item3', 'item4']},
            {title: 'Title3', data: ['item5', 'item6']},
            {title: 'Title2', data: ['item3', 'item4']},
            {title: 'Title3', data: ['item5', 'item6']},
            {title: 'Title2', data: ['item3', 'item4']},
            {title: 'Title3', data: ['item5', 'item6']},
            {title: 'Title2', data: ['item3', 'item4']},
            {title: 'Title3', data: ['item5', 'item6']},
            {title: 'Title2', data: ['item3', 'item4']},
            {title: 'Title3', data: ['item5', 'item6']},
          ]}
          keyExtractor={(item, index) => item + index}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "row",
    flexWrap: "wrap"
  },
  container1:{
    flex:1,
    flexDirection:'row',
  },
  outViewStyle: {
    backgroundColor: "red",
    height: boxW,
    width: boxW,
    marginLeft: vMargin,
    marginTop: hMargin
  },
  container1: {
    alignItems: "center",
    backgroundColor: "#ddd",
    flex: 1
  },
  iconStyle: {
    width: 80,
    height: 80,
    borderRadius: 40,
    marginTop: 60,
    marginBottom: 30
  },
  inputStyle: {
    height: 38,
    backgroundColor: "white",
    marginBottom: 1,
    width: width,
    textAlign: "center"
  },
  loginBtnStyle: {
    backgroundColor: "blue",
    width: 350,
    height: 35,
    marginTop: 30,
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 5
  },
  settingStyle: {
    width: 350,
    flexDirection: "row",
    justifyContent: "space-between",
    marginTop: 20
  },
  loginWayStyle: {
    flexDirection: "row",
    alignItems: "center",
    position: "absolute",
    bottom: 200,
    left: 100
  },
  pageViewStyle: {
    position: "absolute",
    bottom: 0,
    left: 0,
    height: 35,
    backgroundColor: "rgba(0,0,0,0.4)",
    width: width,
    flexDirection: "row",
    alignItems: "center"
  }
});

export default App;
